<script setup>
import { column } from "element-plus/es/components/table-v2/src/common";
import { ref, reactive, computed } from "vue";

const props = defineProps({
    tableData:{
        type:Object,
        default:{}
    }, 
    columnData:{
        type:Array,
        default:[]
    }
})

// 搜索
const search = ref("");
const tableDataFiltered = computed(() => {
    let temp = [...props.tableData]
    if (search.value !== ""){
        temp = temp.filter(item => {
            for (let key in item) {
                if (item[key] != null && item[key].toString().includes(search.value)){
                    return true
                }
            }
            return false
        });
    }
    return temp.slice((pageData.pageCurrent-1)*pageData.pageSize,pageData.pageCurrent*pageData.pageSize)
})

// 分页
const pageData = reactive({
    pageCurrent:1,
    pageSize:10,
})

const handleCurrentChange = (val) => {
    pageData.pageCurrent = val;
}
</script>

<template>
    <div style="float:right; margin-right: 10px; margin-bottom: 15px;">
        搜索<el-input v-model="search" style="width: 200px;"></el-input>
    </div>      
    <el-table :data="tableDataFiltered" style="width: 100%;" stripe border>
        <el-table-column v-for="(item, index) in props.columnData" 
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :sortable="item.sortable"
            :width="item.width"
        >
        </el-table-column>
        <slot/>
    </el-table>
    <br>
    <el-row>
        <el-col :span="20">
            <el-pagination  v-model:current-page="pageData.pageCurrent"
            :page-size="pageData.pageSize"
            layout="prev, pager, next"   
            :total="tableDataFiltered.length"
            prev-text="上一页"
            next-text="下一页"
            @current-change="handleCurrentChange" />
        </el-col>
        <el-col :span="4" style="font-size: 14px;">
            <span>当前 {{(pageData.pageCurrent-1)*pageData.pageSize+1}} 条到 {{Math.min(pageData.pageSize*pageData.pageCurrent,tableDataFiltered.length) }} 条，共 {{tableDataFiltered.length}} 条</span> 
        </el-col>
    </el-row>
</template>
